/*
 * @Author: hy 
 * @Date: 2018-05-28 11:10:55 
 * @Last Modified by: hy
 * @Last Modified time: 2018-06-04 15:46:31
 */
<template>
      <div class="mapCon" :style="mapStyle"  id="map"></div>
</template>
<script>
import echarts from "echarts";
require("echarts/map/js/china.js");
import chart from "@/components/Charts/chart";
const planePath =
  "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";
// const areaDatas = [  示例
//   {
//     name: "北京",
//     value: Math.round(Math.random() * 1000)
//   }
// ];
// mapStyle: 地图的style 样式  ，value: 可用 v-model 传入路线数据数组数据  placeData: 地点数组
/** placeData = [
          {
            name: "广州",
            value: [113.72, 23.13],
            symbolSize: 2,
            itemStyle: { normal: { color: "#FCA057" } }
          },]
           */
export default {
  name: "index",
  props: ["mapStyle", "value", "placeData", "areaData"],
  components: { chart },
  watch: {
    placeData(res) {
      this.$set(this, "cityArr", res);
      this.fetchMap();
    },
    areaData(res) {
      // var areaDatas = [];
      // res.forEach(item => {
      //   var obj = {};
      //   if (item.city != null && item.city.indexOf("市") >= 0) {
      //     item.city = item.city.slice(0, item.city.length - 1);
      //   }
      //   obj.name = item.city;
      //   obj.value = Number(item.name);
      //   areaDatas.push(obj);
      // });
      this.$set(this, "areaDatas", res);
      this.fetchMap()
    },
    value(res) {
      // 根据传入数据进行重组数据
      // 格式： [{fromName:'起始地',toName:'到达地',[[135.22,13.55],[133.33,56.99]]}]
      var linesData = [];
      res.forEach(item => {
        var obj = {};
        if (item.departureLng != null && item.freightReceiveLng != null) {
          obj.fromName = item.departureCity;
          obj.toName = item.freightReceiveCity;
          obj.coords = [
            [item.departureLng, item.departureLat],
            [item.freightReceiveLng, item.freightReceiveLat]
          ];
          linesData.push(obj);
        }
      });
      this.$set(this, "linesData", linesData);
      this.fetchMap();
    }
  },
  data() {
    return {
      mapOption: {}, // 地图option
      linesData: [], // 线路坐标
      cityArr: [], // 地点坐标
      areaDatas: [] // 区域的坐标
    };
  },
  methods: {
    fetchMap() {
      var allData = {
        citys: this.cityArr,
        moveLines: this.linesData
      };
      var mapOption = {
        backgroundColor: "transparent",
        visualMap: {
          show: true,
          min: 0,
          max: 2000,
          itemHeight: 120,
          left: "13%",
          top: "57%",
          text: ["高", "低"],
          seriesIndex: [1],
          inRange: {
            color: ["#00d3fe", "#663cfa"]
          },
          textStyle: {
            color: "#00d3fe",
            fontWeight: "bold"
          },
          calculable: true
        },
        legend: {
          show: false,
          orient: "vertical",
          top: "bottom",
          left: "right",
          data: ["地点", "线路", "111"],
          textStyle: {
            color: "#fff"
          }
        },
        geo: {
          map: "china",
          zoom: 1.0,
          left: "0",
          top: "0",
          regions: [
            {
              name: "河南"
            }
          ],
          label: {
            emphasis: {
              show: false
            }
          },
          roam: false,
          itemStyle: {
            normal: {
              borderColor: "black",
              areaColor: "#00d3fe",
              borderWidth: 1
            },
            emphasis: {
              areaColor: "#00d3fe"
            }
          }
        },
        tooltip: {
          trigger: "item"
        },
        series: [
          {
            name: "地点",
            type: "effectScatter",
            coordinateSystem: "geo",
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke"
            },
            hoverAnimation: true,
            zlevel: 1,
            symbolSize: 15,
            data: allData.citys
          },
          {
            name: "categoryA",
            type: "map",
            geoIndex: 0,
            tooltip: {
              show: false
            },
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            data: this.areaDatas
          },
          {
            name: "飞机后面",
            type: "lines",
            coordinateSystem: "geo",
            zlevel: 1,
            large: true,
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            effect: {
              show: true,
              period: 20,
              trailLength: 0.9,
              color: "#66F8FD",
              symbolSize: 3
            },
            lineStyle: {
              normal: {
                color: "#66F8FD",
                width: 0,
                curveness: 0.3
              }
            },
            data: allData.moveLines
          },
          {
            name: "线路",
            type: "lines",
            coordinateSystem: "geo",
            zlevel: 2,
            large: true,
            effect: {
              show: true,
              period: 20,
              trailLength: 0,
              symbol: planePath,
              symbolSize: 20,
              color: "#66F8FD"
            },
            lineStyle: {
              normal: {
                width: 0,
                color: "#66F8FD",
                opacity: 0.4,
                curveness: 0.3
              }
            },
            data: allData.moveLines
          }
        ]
      };
      var self = this;
      if (this.mapChart) {
        this.mapChart.clear();
        this.mapChart.dispose();
      }
      setTimeout(() => {
        self.mapChart = echarts.init(document.getElementById("map"));
        self.mapChart.setOption(mapOption);
      }, 100);
    }
  }
};
</script>
<style scoped>
.mapCon {
  height: 1200px;
  min-width: 1600px;
  float: left;
  position: fixed;
  top: 10px;
  left: 20px;
}
</style>
